<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue 生命钩子</title>
</head>
<body>

<div id="app">

    <h1>{{ message }}</h1>


</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

    var vue = new Vue({
        el: "#app",
        data() {
            return {
                message: "sgq"
            }
        },
        beforeCreate() {
            console.log("beforeCreate() , 模版和数据都没有", this.$el, this.$data);
        },
        created() {
            console.log("created() 模版还没有创建，但是数据已经初始化完成 ", this.$el, this.$data);
        },
        beforeMount() {
            console.log("beforeMount() 模版和数据都初始化完成，但是模版中的数据还没有替换到模版中", this.$el, this.$data);
        },
        mounted() {
            console.log("mounted() 模版和数据初始化完成，数据已经加载到模版中", this.$el, this.$data);
        },
        beforeUpdate() {
            console.log("beforeUpdate() 数据发生改变之前进行修改", this.$el, this.$data);
        },
        updated() {
            console.log("updated() 数据进行改变", this.$el, this.$data);
        },
        beforeDestroy() {
            console.log("beforeDestroy()销毁Vue实例之前调用", this.$el, this.$data);
        },
        destroyed() {
            console.log("destroyed() 销毁实例后执行", this.$el, this.$data);
        }
    });

    vue.$destroy()

</script>
</body>
</html>
